<template>
    <el-dialog :title="title" @close="handleClose" :visible="visible" width="600px" center :close-on-click-modal="false">
        <el-form :model="formInline" :rules="rules" ref="formInline" :label-width="labelWidth" class="demo-formInline"
            v-loading="loading">
            <el-form-item label="现有商户编号：" prop="merchantId">
                <el-input v-model="formInline.merchantId" placeholder="请输入" :disabled="detailShow ? true : false"
                    :style="{ width: inputWidth }"></el-input>
                <template v-if="id == '' || id == undefined">
                    <el-button type="primary" style="margin-left: 10px;" @click="searchMerchants('formInline')"
                        v-if="!detailShow">查询</el-button>
                    <el-button type="warning" style="margin-left: 10px;" v-if="detailShow" @click="requery">清空</el-button>
                </template>
            </el-form-item>
            <template v-if="detailShow">
                <el-form-item label="商户账号名称：" prop="">
                    <span>{{ detailInfo.merchantName == '' || detailInfo.merchantName == undefined ? '-' :
                        detailInfo.merchantName
                    }}</span>
                </el-form-item>
                <el-form-item label="店铺名称：" prop="">
                    <span>{{ detailInfo.shopName == '' || detailInfo.shopName == undefined ? '-' : detailInfo.shopName
                    }}</span>
                </el-form-item>
                <el-form-item label="赚卡结算方式：" prop="">
                    <el-radio-group v-model="formInline.equityCardSettleType">
                        <el-radio :label="'1'">门店自行结算</el-radio>
                        <el-radio :label="'2'">结算到其他门店</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="结算门店：" prop="equityCardSettleMerchantId" v-if="formInline.equityCardSettleType == '2'">
                    <el-select v-model="formInline.equityCardSettleMerchantId" placeholder="请选择" filterable
                        :style="{ width: inputWidth }">
                        <el-option v-for="item in shopOptions" :key="item.merchantId" :label="item.shopName"
                            :value="item.merchantId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </template>
        </el-form>
        <div class="button_box" v-if="detailShow">
            <el-button style="margin-right: 30px" @click="handleClose">取消</el-button>
            <el-button type="primary" :loading="buttonLoading" @click="sumit('formInline')"
                v-if="id == '' || id == undefined">确认添加</el-button>
            <el-button type="primary" :loading="buttonLoading" @click="clickEdit('formInline')" v-else>确认修改</el-button>
        </div>
    </el-dialog>
</template>
<script>
// api
import {
    merchantSearch, settleShopSelect, chainshopListAdd, chainshopDetail, chainshopUpdate,
} from "@/api/syChainManagement/syChainManagement.js";

export default {
    props: {
        visible: Boolean,
        id: String,
    },
    data() {
        return {
            labelWidth: '120px',
            inputWidth: '280px',
            title: '添加门店',//
            loading: false,
            detailShow: false,
            detailInfo: {},
            formInline: {
                chainId: '',//神椰连锁总部id
                merchantId: "", //现有商户编号
                equityCardSettleType: "1", //结算方式 1门店自行结算 2 结算到其他门店
                equityCardSettleMerchantId: '',//结算商家id
            },
            rules: {
                merchantId: [{
                    required: true,
                    message: '请输入现有商户编号',
                    trigger: ['change', 'blur']
                }, {
                    validator: (rule, value, callback) => {
                        if (/^(?:[1-9]\d*)$/.test(value) == false) {
                            callback(new Error("请输入正确商户编号"));
                        } else {
                            callback();
                        }
                    },
                    trigger: ['change', 'blur']
                }],
                equityCardSettleMerchantId: [{
                    required: true,
                    message: '请选择结算门店',
                    trigger: ['change', 'blur']
                }],
            },
            shopOptions: [],//结算门店下拉
            buttonLoading: false,
            detailId: '',//编辑id
        };
    },
    created() {
        this.formInline.chainId = this.$route.query.id;
        if (this.id) {
            this.title = '编辑门店'
            this.lookDetail()
        } else {
            this.title = '添加门店'
        }
    },
    methods: {
        //结算门店下拉框
        getSettleShopSelect() {
            var data = {
                chainId: this.formInline.chainId,
                id: this.id
            }
            settleShopSelect(data)
                .then((res) => {
                    this.shopOptions = res.result
                })
                .catch(() => {

                });
        },
        //重新查询
        requery() {
            this.formInline.merchantId = ''
            this.detailShow = false
        },
        // 查询商户
        searchMerchants(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    merchantSearch(this.formInline.merchantId)
                        .then((res) => {
                            if (res.result != '') {
                                this.detailInfo = res.result
                                this.detailShow = true
                                this.getSettleShopSelect()
                            }
                        })
                        .catch(() => {
                            this.detailShow = false
                        });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //确认添加
        sumit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var data = {
                        ...this.formInline
                    }
                    this.buttonLoading = true
                    chainshopListAdd(data)
                        .then((res) => {
                            this.$message.success('添加成功');
                            setTimeout(() => {
                                this.$emit('success')
                                this.handleClose()
                            }, 300)
                        })
                        .catch(() => {
                            this.buttonLoading = false
                        });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //编辑查看
        lookDetail() {
            let id = this.id;
            this.loading = true
            chainshopDetail(id).then((res) => {
                this.formInline = res.result
                this.getSettleShopSelect()
                setTimeout(() => {
                    this.formInline.equityCardSettleMerchantId = res.result.equityCardSettleMerchantId
                    this.detailInfo.merchantName = res.result.merchantName
                    this.detailInfo.shopName = res.result.shopName
                    this.detailShow = true
                    this.loading = false
                }, 500)
            }).catch(() => {
                this.loading = false
            })
        },
        //编辑
        clickEdit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const params = {
                        equityCardSettleMerchantId: this.formInline.equityCardSettleMerchantId,
                        equityCardSettleType: this.formInline.equityCardSettleType,
                        id: this.id,
                    };
                    this.buttonLoading = true;
                    chainshopUpdate(params)
                        .then((res) => {
                            this.$message.success('修改成功');
                            setTimeout(() => {
                                this.$emit('success')
                                this.handleClose()
                            }, 500)
                        })
                        .catch(() => {
                            this.buttonLoading = false
                        });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        handleClose() {
            this.$emit("update:visible", false);
        },
    },
};
</script>
<style lang="scss" scoped>
.button_box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.from_box {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

.from_box_l {
    font-size: 14px;
    color: #606266;
    width: 240px;
    text-align: right;
}

.add_boxls {
    display: flex;
    align-items: center;
    justify-content: center;
}

.add_box {
    width: 45%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    height: 152px;
    cursor: pointer;
    background: #fdf6ec;
    border: 1px solid #f5dab1;
    color: #e6a23c;
}

.add_box2 {
    background: #ecf5ff;
    border: 1px solid #b3d8ff;
    color: #409eff;
}

.add_box:hover {
    opacity: 0.8;
}

.add_box img {
    width: 46px;
    height: 46px;
    margin-right: 12px;
}
</style>
  